<template>
	<view class="container">
		<view class="carousel">
		  <swiper indicator-dots circular=true duration="400">
			<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
			    <view class="image-wrapper">
					<image :src="item.pic_url" class="loaded" mode="aspectFill"></image>
				</view>
			</swiper-item>
		  </swiper>
	    </view>
		
		<view class="introduce-section">
			<view class="price-box">
				<text class="price-tip">¥</text >
				<text class="price">{{lists[0].price}}</text>
				<text class="m-price">￥{{lists[0].original_price}}</text>
			</view>
			<view class="title">{{lists[0].name}}</view>
		</view>
		<view class="share" @click="share">
			<text class="share-txt">分享</text>
		</view>
		
		<!-- 优惠卷 -->	
		<view class="yhj">		
			<view class="yhj-item">
				<view v-for="(item,index) in couponList" :key="index">{{item.rule}}</view>
			</view>
			<view class="yhj-icon">
				<image src="../../static/selected.png" mode="aspectFill"   @click="toggleMask('show')" ></image>
			</view>
		</view>
		<!-- 包邮 -->
		<view class="sent">
			<view class="sent-left">
				<text>包邮</text>
				<image src="/static/select.png"></image>
			</view>
			<view class="sent-right">月销量 {{lists[0].num}}</view>
		</view>
		<!-- 规格 -->
		<view class="selete" @click="toggleSpec">
			<view class="selete-cen">
				<text class="selete-set">选择</text>
				<text class="selete-pri">规格</text>
			</view>
			<image class="selete-img" src="/static/select.png"></image>
		</view>

		<view class="c-list">
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>{{lists[0].service}}</text>
				</view>
			</view>
		</view>
		<!--  商品详情 和评价 tab 切换 -->
		<view class="detail">
			　　<view @click="change(0)" :class="{btna:btnnum == 0}">商品详情</view>
			　<view @click="change(1)" :class="{btna:btnnum == 1}">评价</view>
		</view>
		<!-- 左边详情 -->
		<view class="detail-cont detail-desc" :class="{dis:btnnum == 0}">　
			<!-- 在下面的数据表里 -->
			<rich-text :nodes="desc"></rich-text>
		</view>
		<!-- 右边 评价 -->
		<view class="detail-cont" :class="{dis:btnnum == 1}">
			<view class="evaluate">
				<view class="evaluate-item">
					<text>全部</text><text>(1)</text>
				</view>
				<view class="evaluate-item">
					<text>好评</text><text>(1)</text>
				</view>
				<view class="evaluate-item">
					<text>中评</text><text>(0)</text>
				</view>
				<view class="evaluate-item">
					<text>差评</text><text>(0)</text>
				</view>
			</view>
			<!-- 评价信息 -->
			<view class="eva-section">
				<view v-show="bolshow" class="nothing-talk">该商品暂无评价!</view>
				<view class="eva-box"  v-for="(item,index) in talkList" :key="index">
					<image class="portrait" :src="item.avatar_url" mode="aspectFill"></image>
					<view class="right">
						<text class="name">{{item.nickname}}</text>
						<text class="con">{{item.content}}</text>
						<view class="bot">
							<text class="attr">{{item.score}}</text>
							<text class="time">{{item.addtime}}</text>
						</view>
						
					</view>
				</view>
				
			</view>

			
		</view>


		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/shoppingcart/cart" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>
			<!-- <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
				<text class="yticon icon-shoucang"></text>
				<text>收藏</text>
			</view> -->

			<view class="action-btn-group">
				<button type="primary" class="action-btn no-border buy-now-btn" @click="buy(spec.price)">立即购买</button>
				<button type="primary" class="action-btn no-border add-cart-btn" @click="addCart(id,specSelected[0].attr_id,spec.price)">加入购物车</button>
			</view>

		</view>
        <!-- 优惠券面板 -->
        <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
          <view class="mask-content" @click.stop.prevent="stopPrevent">
             <!-- 优惠券页面，仿mt -->
             <view class="receive">
              <text>领取微信优惠券</text>
              <text class="receive-cha" @click="discountDetail">×</text>
             </view>
            <view class="coupon-counts">
              <view class="coupon-item" v-for="(item,index) in couponList" :key="index">
               <view class="con">
                <view class="left">
                 <text class="titles">{{item.sub_price}}</text>
                 <text class="times">{{item.rule}}</text>
                 <text class="time">{{item.begin_time}}-{{item.end_time}}</text>
                </view>
                <view class="dashed"></view>
                <view class="right" :data-count="index" @click="imReceive">立即领取</view>
                <view class="circle l"></view>
                <view class="circle r"></view>
               </view>
               <text class="tips">微信支付</text>
              </view>
            </view>
          </view>
        </view>
		
		<!-- 规格-模态层弹窗 -->
				<view 
					class="popup spec" 
					:class="specClass"
					@touchmove.stop.prevent="stopPrevent"
					@click="toggleSpec"
				>
					<!-- 遮罩层 -->
					<view class="mask"></view>
					<view class="layer attr-content" @click.stop="stopPrevent">
						<view class="a-t">
							<image :src="spec.pic"></image>
							<view class="right">
								<text class="price">¥{{spec.price}}</text>
								<text class="stock">库存：{{spec.num}}件</text>
								<view class="selected">
									已选：
									<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
										{{sItem.attr_name}}
									</text>
								</view>
							</view>
						</view>
						<view v-for="(item,index) in specList" :key="index" class="attr-list">
							<text>{{item.attr_name}}</text>
							<view class="item-list">
								<text 
									v-for="(childItem, childIndex) in specChildList" 
									v-if="childItem.attr_id === item.attr_id"
									:key="childIndex" class="tit"
									:class="{selected: childItem.selected}"
									@click="selectSpec(childIndex, childItem.attr_id)"
								>
									{{childItem.attr_name}}
								</text>
							</view>
						</view>
						<view class="buy-num">
							<text class="tit">购买数量</text>
							<view class="act-num">
								<text @click="numSub">-</text>
								<text>{{buyNum}}</text>
								<text @click="numAdd">+</text>
							</view>
						</view>
						
						<button class="btn" @click="toggleSpec">完成</button>
					</view>
				</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="580"
			:shareList="shareList"
		></share>
	</view>
</template>

<script>
	import url from '../../components/hosturl.js';
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				bolshow:false,
                maskState: 0, //优惠卷
				btnnum: 0, //tab当前页面,
				specClass: 'none',
				specSelected: [],
				couponList: [],   //优惠卷
				favorite: true,
				shareList: [],
				
				//商品详情 name，price，original_price...
				lists:[],
				imgList: [], //存放轮播图
				desc: ` `, //图片详情展示
				
				talkList:[],  //评价信息
				specList: [],//规格信息
				specChildList:[],
				spec:null, // 规格信息对像
				buyNum:1,//购买数量

			};
		},

		async onLoad(options) {
			this.id = options.id;
			//显示商品详细信息
			uni.request({
				url:url+'/Commodity/getMoreInformation',
				data:{
					id:options.id
				},
				method:'get',
				success:(res)=>{
					 
					 if(res.data.Blurb){
						 this.lists=res.data.Blurb;
						 this.desc=res.data.Blurb[0].detail;
						 var jsonDa = JSON.stringify(res.data.Blurb[0].detail).replace(/<img/gi, "<img class='richImg'style='width:100%!important;height:auto!important;'");
					 }
					 if(res.data.message){
						 console.log('wuhuodong')
						 this.lists=res.data.message;
						 this.desc=res.data.message[0].detail;
						 var jsonDa = JSON.stringify(res.data.message[0].detail).replace(/<img/gi, "<img class='richImg'style='width:100%!important;height:auto!important;'");
					 }
					 
					
					 this.imgList=res.data.URL;
					
					 var newResData = JSON.parse(jsonDa);
					//得到的数据含有img标签的都有richImg类    
					 this.desc=newResData   //最后的desc数据
				}
			})
			//显示评价信息
			uni.request({
				url:url+'/Commodity/getEvaluate',
				data:{
					id:options.id
				},
				method:'get',
				success:(res)=>{
					this.talkList=res.data.message; 
					console.log('评价',this.talkList);
					//获取时间戳，执行转变方法
					this.talkList.forEach(item=>{ 
						item.addtime=this.happenTimeFun(item.addtime)  
					})  
					//如果评价为空
				    if(this.talkList.length==0){
					   this.bolshow=true;
				    }else{
					  this.bolshow=false;
				    }
				},
			})
			// 优惠券信息
			uni.request({
				url:url+'/Main/getCoupons',
				data:{
					id:options.id
				},
				method:'get',
				success:(res)=>{
					console.log(res.data)
					this.couponList=res.data.message;
					//获取时间戳，执行转变方法
					this.couponList.forEach(item=>{ 
						item.begin_time=this.happenTimeFun(item.begin_time);
						item.end_time=this.happenTimeFun(item.end_time);
					});
					console.log('优惠券',this.couponList);
					// //如果评价为空
				 //    if(this.couponList.length==0){
					//    this.bolshow=true
				 //    }else{
					//   this.bolshow=false
				 //    }
				},
			})
			//获取规格接口信息！！！！！！
			uni.request({
				url:url+'/Commodity/getSpecifShopping',
				data:{
					id:15 //options.id
				},
				method:'get',
				success:(res)=>{
					console.log('规格',);
					var data = JSON.parse(res.data.message);
					
					this.spec = data[0];
					this.specList = data[0].attr_list;
					this.specChildList = data[0].attr_list;
					console.log('规格列表',this.specChildList);
					// var da = this.specList;
					// //规格 默认选中第一条
					// for(var i=0;i<da.length;i++){
					// 	for(var cItem of this.specChildList){
					// 		console.log('规格测试',cItem,da[i]);
					// 		if (cItem.pid === da[i].id){
					// 			this.$set(cItem, 'selected', true);
					// 			this.specSelected.push(cItem);
					// 			break; //forEach不能使用break
					// 		}
					// 	}
					// }
					
				}
			});
			let data = JSON.parse(decodeURIComponent(options.id));
			this.lists.splice(0,1,data[0]);
			
			this.shareList = await this.$api.json('shareList');
			
		},
		methods: {
			//购买数量
			numSub(){
				if(this.buyNum>1){
					this.buyNum = this.buyNum-1;
				}else{
					uni.showToast({
						title:'购买数量不能为0'
					});
				}
				
			},
			numAdd(){
				this.buyNum = this.buyNum+1;
			},
			//点击加入购物车
			addCart(sid,attr,price){
				var num=String(this.buyNum);
				var token=uni.getStorageSync('token');
				var sid=String(sid);
				var price=String(price);
				console.log(sid,num,attr,price)
				uni.request({
					url:url+'/Shopping/putShoppingCar',
					method:'POST',
					data:{
						token,
						sid,
						num,
						attr,
						price
					},
					header: {
					        "Content-Type": "application/x-www-form-urlencoded"
					},
					success:res=>{
						console.log(res);
						if(res.data.msg=='添加成功'){
							uni.showToast({
							    title: '添加成功',
							    duration: 500
							});
							uni.switchTab({
								url:'/pages/shoppingcart/cart'
							});
						}else{
							uni.showToast({
							    title: '添加失败',
							    duration: 500
							});
						}
					}
				})
			},
			//时间戳数据处理
			happenTimeFun(num){
			    let date = new Date(num * 1000);
			    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    let y = date.getFullYear();
			    let MM = date.getMonth() + 1;
			    MM = MM < 10 ? ('0' + MM) : MM;   //月补0
			    let d = date.getDate();
			    d = d < 10 ? ('0' + d) : d;//天补0
			    let h = date.getHours();
			    h = h < 10 ? ('0' + h) : h;//小时补0
			    let m = date.getMinutes();
			    m = m < 10 ? ('0' + m) : m;//分钟补0
			    let s = date.getSeconds();
			    s = s < 10 ? ('0' + s) : s;//秒补0
			    // return y + '-' + MM + '-' + d; //年月日
			    return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
			},     
			//tab切换
			change(e) {
				this.btnnum = e
			},
			
			//领取优惠券
			   imReceive(e){
			    if(this.couponList[e.currentTarget.dataset.count].content == '立即领取') {
			     this.couponList[e.currentTarget.dataset.count].content = '已领取';
			     wx.showToast({
			      title: '领取成功',
			     });
			    }else{
			     wx.showToast({
			      title: '卷已在卡包中',
			     });
			    }
			},
			//关闭优惠券
			discountDetail(){
			    this.maskState = 0;
			},
			//显示优惠券面板
			toggleMask(type){
				console.log('点击了优惠卷按钮');
			    let timer = type === 'show' ? 10 : 300;
			    let state = type === 'show' ? 1 : 0;
			    this.maskState = 2;
			    setTimeout(()=>{
			     this.maskState = state;
			    }, timer);
			},
			
			// 规格弹窗开关
			toggleSpec() {
				console.log(this.specClass);
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			// 选择规格
			selectSpec(index, pid) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				});

			},
			//分享
			share() {
				console.log(this.$refs.share);
				// this.share.toggleMask();
				this.$refs.share.toggleMask();
			},
			//收藏
			toFavorite() {
				this.favorite = !this.favorite;
			},
			buy(price){
				var attr = this.specSelected[0].attr_id;
				var obj = {
					id:this.id,
					price,
					num:this.buyNum,
					attr
				};
				
				var url = '/pages/shoppingcart/createOrder?obj='+ encodeURIComponent(JSON.stringify(obj));
				
				uni.navigateTo({
					url: url
				});
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
/* 商品名称*/
.title { color: #333;display: inline-block;font-size: 30rpx;flex: 1;line-height: 40rpx;}
.introduce-section { background: #fff;display: flex;flex-direction: column;padding: 20rpx 30rpx ; }
.price-box{ align-items: baseline;color: #a387eb;flex: 1; }
.price-tip{ font-size: 26rpx; }
.price {font-size: 46rpx;}
.m-price { color:#8b8b8b;font-size: 30rpx;margin-left: 50rpx;text-decoration: line-through; }
.discounts { display: block;height: 120rpx;width: 100%; }
.discounts-full { display: flex;margin-left: 10rpx;width: 70%; }
.discounts-full-rec { color: #a387eb;border-radius: 5rpx;background: #fcf;font-size: 22rpx;margin: 40rpx 20rpx;padding: 10rpx 10rpx;}
.discounts-img {float: right;height: 40rpx;margin-top: -73rpx;margin-right: 20rpx;width: 30rpx;}
.free { height: 60rpx;padding: 0 20rpx;}
.free-ship { color: #000;font-size: 30rpx;float: left;}
.free-img {height: 20rpx;width: 20rpx;}
.bot-row {align-items: center;color: #ccc;height: 50upx;font-size: 24rpx;float: right;}
/* 规格 */
.selete { align-items: center;background: #fff;border: 20rpx #ddd solid;border-left: none;border-right: none;display: flex;justify-content: space-between; }
.selete-cen { line-height: 100rpx; }
.selete-set { color: #000;font-size: 40rpx;margin-left: 30rpx; }
.selete-pri { color: #ccc;font-size: 24rpx;margin-left: 40rpx; }
.selete-img { height: 40rpx;margin-right: 20rpx;width: 40rpx; }
/* 分享 */
.share { background: #a387eb;border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;height: 40rpx;line-height: 40rpx;position: fixed;right: 0;top: 770rpx;text-align: center;width: 100rpx;z-index: 1000;}
.share-txt { color: #fff;font-size: 36rpx; }

/* 优惠卷 */
.yhj { display: flex;justify-content: space-between;align-items: center;height: 70rpx;padding: 10rpx 20rpx 10rpx 30rpx;background: #fff; }

.yhj-item { display: flex;flex-direction: row;justify-content: space-around;align-items: center; }

.yhj-item view { height: 40rpx;line-height: 40rpx;padding: 0 16rpx;margin-right: 20rpx;background: rgba(255, 0, 0, 0.1);color: #a387eb;font-size: 22rpx; }

.yhj-icon,.yhj-icon image { width: 40rpx;height: 40rpx; }

/* 购买数量 */
.buy-num { height:100rpx;display: flex;justify-content:space-between;border-top:1px #ddd solid;align-items:center;padding-top:30rpx; }
.buy-num .tit { line-height:100rpx; }
.buy-num .act-num { display: flex; }
.buy-num .act-num text { height:78rpx;height:78rpx;width:78rpx;justify-items:center;line-height: center;display: flex;justify-content: center;align-items: center;border:1px #ddd solid;font-size:40rpx;background:#fafafa; }
.buy-num .act-num text:nth-child(2) { width:120rpx; }
	/* 优惠卷面板 */  
	/* 优惠券面板 */
.mask{ align-items: flex-end;background: rgba(0,0,0,0);bottom: 0;display: flex;left: 0;position: fixed;transition: .3s;top: var(--window-top);width: 100%;z-index: 9995;
	  .mask-content{ background: #f3f3f3;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;height: 60vh;overflow-y:scroll;transform: translateY(100%);transition: .3s;width: 100%; }
	  &.none{ display: none; }
	  &.show{ background: rgba(0,0,0,.4); 
	   .mask-content{ transform: translateY(0); }
	  }
	 }
	 .receive { background: #fff;color: #0b0b0b;font-size: 32rpx;height: 106rpx;line-height: 106rpx;position: absolute;text-align: center;
	  left: 0;
	  top: 0;
	  width: 100%;
	  }
	 .receive-cha { font-size: 36rpx;position: absolute;right: 30rpx;top: 0; }
	 .coupon-counts {
	  height: 100%;
	  overflow-y: scroll;
	  margin-top: 106rpx;
	 }
	 /* 优惠券列表 */
	 .coupon-item{ background: #fff;color: #fff;display: flex;flex-direction: column;margin: 20upx 24upx;
	  .con{ align-items: center;background: #a387eb;display: flex;height: 160rpx;padding: 0 30upx;position: relative;
	   &:after{ border-bottom: 1px dashed #f3f3f3;bottom: 0;content: '';height: 0;left: 0;position: absolute;transform: scaleY(50%);width: 100%; }
	  }
	  .left{ display: flex;flex: 1;flex-direction: column;height: 100upx;justify-content: center;overflow: hidden; }
	  .titles{ font-size: 32rpx;margin-bottom: 10upx;
	   &:before{ content: '￥';font-size: 22rpx; }
	  }
	  .time{ font-size: 18rpx; }
	  .times{ font-size: 24rpx; }
	  .right{ font-size: 28rpx;padding-left: 30rpx;text-align: center; }
	  .dashed{ height: 100%;border-left: 1px #fff dashed; }
	  .tips{ color: $font-color-light;font-size: 24upx;line-height: 60upx;padding-left: 30upx; }
	  .circle{ background: #f3f3f3;border-radius: 100px;bottom: -10upx;height: 20upx;left: -6upx;position: absolute;width: 20upx;z-index: 1000;
	   &.r{ left: auto;right: -6upx;}
	  }
	 }
	
    /* ************************* */
	/* 包邮 */
	.sent {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx 20rpx 10rpx 30rpx;
		background: #fff;
	}

	.sent-left {
		font-size: 22rpx;
		color: #8b8b8b;
		display: flex;
		align-items: center;
	}

	.sent-left image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.sent-right {
		font-size: 22rpx;
		color: #8b8b8b;
	}

	/* 将三个内容view的display设置为none(隐藏) */
	.detail {
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx #ddd solid;
	}

	.detail view {
		height: 98rpx;
		line-height: 98rpx;
		font-size: 30rpx;
		color: #333;
	}

	.detail-cont {
		display: none;
		background: #fff;
		height: 100%;
	}

	.btna {
		color: #a387eb;
		border-bottom: 2rpx #a387eb solid;

	}

	.dis {
		display: block;
	}
    /*  */
	/* 评价 */
	.nothing-talk{margin:10px auto 100px ;background: #fff;font-size: 16px;color: #606266;}
	.evaluate {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		color: #333;
		height: 100rpx;
		border-bottom: 1rpx #ddd solid;
	}

	.evaluate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
	}

	.evaluate-item text:nth-of-type(2) {
		color: #8b8b8b;

	}



	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}


	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #a387eb;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #a387eb, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
